<template>
    <div class="message">
        <div class="top">
            <div class="header">
                <router-link to="/message/notice" active-class="headerActive">通知</router-link>
                <router-link to="/message/fans" active-class="headerActive">粉丝</router-link>
                <van-badge :content="content" max="99">
                    <router-link to="/message/private-letter" active-class="headerActive">私信</router-link>
                </van-badge>
            </div> 
            <div class="main">
                <router-view></router-view>
            </div>
        </div>
        <MyFoot/>
    </div>
</template>

<script> 


import MyFoot from '../common/MyFoot.vue'
import axios from 'axios'
import jwtDecode from 'jwt-decode' 
import {Toast} from 'vant'
export default {
    name:'Message',
    components:{
        MyFoot
    },
    mounted(){
        let token=sessionStorage.getItem("token")
        this.decode = jwtDecode(token);
        //获取未读消息数
        axios({
            url:'/chat/unread',
            method:'get',
            params:{
                userId:this.decode.userId
            },
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
            }
        }).then(data=>{
            if(data.data.data !== 0){
                this.content = data.data.data
            }else{
                this.content = null
            }
        }).catch(err=>{
            console.log(err)
        })
    },
    data() {
        return {
            content:null,
            decode:null
        }
    },
    beforeRouteEnter (to, from, next) {
        if(sessionStorage.getItem('token')){
            next()
        }else{
            Toast('请登录或注册')
        }
    }
}
</script>

<style lang="less" scoped>
    .message{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        .header{
            background-color: white;
            height: 0.6rem;
            padding: 0.3rem 0;
            display: flex;
            justify-content: space-around;
            // border-bottom: solid 1px #e0e0e0;
            a{
                color: #292929;
                font-size: @fontSmall;
            }
            .headerActive{
                color: var(--themeColor);
            }
        }
    }
    .main{
        overflow-x: hidden;
    }
</style>